<template>
  <view class="page">
	<view class="box-floor">
		<view class="item-list">
			<view class="item">
				<view class="item-pic bg-1">
					<view class="item-title u-line-1">幼儿14天入门</view>
					<view class="item-sub-title">冠军教练一对一辅导</view>
					<view class="item-icon">
						<i class="iconfont icon-yinger"></i>
					</view>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">幼儿14天入门</view>
					<view class="item-desc">
						<view class="item-price">￥399.00</view>
						<view class="item-count">320人正在学</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic bg-2">
					<view class="item-title u-line-1">儿童15天蛙泳</view>
					<view class="item-sub-title">冠军教练一对一辅导</view>
					<view class="item-icon">
						<i class="iconfont icon-children-full"></i>
					</view>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">儿童15天蛙泳</view>
					<view class="item-desc">
						<view class="item-price">￥399.00</view>
						<view class="item-count">320人正在学</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic bg-3">
					<view class="item-title u-line-1">成人蛙泳10天速成</view>
					<view class="item-sub-title">冠军教练一对一辅导</view>
					<view class="item-icon">
						<i class="iconfont icon-youyong"></i>
					</view>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">成人蛙泳10天速成</view>
					<view class="item-desc">
						<view class="item-price">￥399.00</view>
						<view class="item-count">320人正在学</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic bg-4">
					<view class="item-title u-line-1">成人10天自由泳</view>
					<view class="item-sub-title">冠军教练一对一辅导</view>
					<view class="item-icon">
						<i class="iconfont icon-swimming"></i>
					</view>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">成人10天自由泳</view>
					<view class="item-desc">
						<view class="item-price">￥399.00</view>
						<view class="item-count">320人正在学</view>
					</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss">
.page{
	padding-bottom: 50rpx;
}
image{
	width: 100%;
	height: 100%;
}
.box-floor{
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx 30rpx;
	.hd-title{
		margin-bottom: 20rpx;
		font-size: 36rpx;
		display: flex;
		justify-items: center;
		justify-content: space-between;
		.link-more{
			font-size: 26rpx;
			color: #999;
			display: flex;
			align-items: center;
		}
	}
}
.item-list{
	.item{
		display: flex;
		margin-top: 20rpx;
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 10rpx rgba(143,168,191,0.35);
		&-pic{
			position: relative;
			width: 290rpx;
			height: 156rpx;
			border-radius: 10rpx;
			padding: 30rpx 10rpx 10rpx;
			margin-right: 20rpx;
			overflow: hidden;
			.item-title{
				color: #fff;
				padding-right: 20rpx;
				font-weight: 500;
				font-size: 32rpx;
			}
			.item-sub-title{
				margin-top: 10rpx;
				color: #fff;
				font-size: 20rpx;
			}
			.item-icon{
				position: absolute;
				z-index: 10;
				right: -40rpx;
				top: -40rpx;
				width: 120rpx;
				height: 120rpx;
				background: rgba(255,255,255,0.6);
				border-radius: 50%;
				.iconfont{
					position: absolute;
					bottom: 25rpx;
					left: 25rpx;
					font-size: 42rpx;
					color: #fff;
				}
			}
		}
		&-pic.bg-1{
			background: #CC66FF;
			box-shadow: 0 4rpx 10rpx rgba(204,102,255,0.5);
		}
		&-pic.bg-2{
			background: #0099FF;
			box-shadow: 0 4rpx 10rpx rgba(0,153,255,0.5);
		}
		&-pic.bg-3{
			background: #FF6666;
			box-shadow: 0 4rpx 10rpx rgba(255,102,102,0.5);
		}
		&-pic.bg-4{
			background: #00CCCC;
			box-shadow: 0 4rpx 10rpx rgba(0,204,204,0.5);
		}
		&-msg{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item-title{
				font-weight: bold;
			}
			.item-desc{
				display: flex;
				margin-top: 30rpx;
				justify-content: space-between;
				align-items: center;
				.item-price{
					color: #EFB336;
				}
				.item-count{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
